window.addEventListener('load', function () {
    var tbPromo = document.querySelector('.tb-promo');
    var prevd = document.querySelector('.prev');
    var next = document.querySelector('.next');
    // 获取宽度
    var tbPromoWidth = tbPromo.offsetWidth;

    // 1鼠标经过轮播图显示左右按钮，离开隐藏左右按钮
    tbPromo.addEventListener('mouseenter', function () {
        prevd.style.display = 'block';
        next.style.display = 'block';

        // 鼠标经过停止定时器
        clearInterval(timer);
        timer = null;  //清空定时器
    });
    tbPromo.addEventListener('mouseleave', function () {
        prevd.style.display = 'none';
        next.style.display = 'none';

        // 鼠标离开开启定时器
        timer = setInterval(function () {
            // 手动调用事件
            next.click();
        }, 2000);
    });
    //2 动态生成小圆圈，有几张图就生成几个小圆圈 
    //图片
    var ul = tbPromo.querySelector('ul');
    //小圆圈
    var ol = tbPromo.querySelector('.promo-nav');
    // console.log(ul.children.length);
    for (var i = 0; i < ul.children.length; i++) {
        // 创建一个小li，小圆圈
        var li = this.document.createElement('li');
        // 记录当前小圆圈的索引号，通过自定义属性来做
        li.setAttribute('index', i);

        // 把li插入到ol里面
        ol.appendChild(li);
        // 生成小圆圈的时候，直接绑定点击事件
        li.addEventListener('click', function () {
            //3 拍他思想，把全部的排除selected
            for (var i = 0; i < ol.children.length; i++) {
                var li = ol.children[i];
                li.className = '';
            }
            this.className = 'selected';

            // 4点击小圆圈移动图片
            // ul的移动距离是小圆圈的索引号*宽度

            // 点击某个小li就会获取他的索引号
            var index = this.getAttribute('index');

            // 当我们点击某个远点，要把index给num
            num = index;
            circle = index;

            animate(ul, -index * tbPromoWidth);
        });
    }
    // 把ol里面的第一个li设置为选定状态
    ol.children[0].className = 'selected';

    // 6克隆第一张图片放到放到最后面
    var firstLi = ul.children[0].cloneNode(true);
    ul.appendChild(firstLi);

    // 7 点击右侧按钮 图片滚动一张
    var num = 0; //图片的索引号
    var circle = 0; //控制小圆圈的变化
    next.addEventListener('click', function () {
        // （图片无缝滚动）如果走到了最后一张，ul快速复原 left设为0
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, -num * tbPromoWidth);


        // 8 走到哪个哪个小圆点变色，其他不变色
        circle++;
        // 如果circle = 4,置为0
        circle = circle == ol.children.length ? 0 : circle;
        circlePageChange();

    });

    // 9 点击左侧按钮 图片滚动到上一张
    prevd.addEventListener('click', function () {
        // （图片无缝滚动）如果走到了最后一张，ul快速复原 left设为0
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * tbPromoWidth + 'px';

        }
        num--;
        animate(ul, -num * tbPromoWidth);


        // 8 走到哪个哪个小圆点变色，其他不变色
        circle--;
        // 如果circle < 0,置为第一张圆圈要改为最后一个小圆圈
        circle = circle < 0 ? ol.children.length - 1 : circle;
        circlePageChange();
    });

    // circle位置改变
    function circlePageChange() {
        for (var i = 0; i < ol.children.length; i++) {
            var li = ol.children[i];
            if (i == circle) {
                li.className = 'selected';
            } else {
                li.className = '';
            }
        }
    }

    // 10 鼠标未在轮播图上自动滚动 2s调用一次
    var timer = this.setInterval(function () {
        // 手动调用事件
        next.click();
    }, 2000);
});